<template>
	<section>
		<!--start-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item>设置</el-breadcrumb-item>
				<el-breadcrumb-item>仓库</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--start content-->
		<div class="content" ref="content">
			<!--新增仓库-->
			<div class="add">
				<transition name="fade">
					<div class="modal-backdrop" v-show="vue_add"></div>
				</transition>
				<transition name="slideDown">
					<div class="specific-search" v-show="vue_add">
						<div class="search-title">
							<p>新增仓库</p>
						</div>
						<div class="form">
							<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
							  <el-form-item label="仓库名称" prop="warehouseName">
							    <el-input v-model="ruleForm.warehouseName"></el-input>
							  </el-form-item>
							  <!--<el-form-item label="仓库编码" prop="warehouseCode">
							    <el-input v-model="ruleForm.warehouseCode"></el-input>
							  </el-form-item>-->
							  <el-form-item label="仓库地址">
							    <el-input type="textarea" v-model="ruleForm.warehouseAddr"></el-input>
							  </el-form-item>

							</el-form>
						</div>
						<div class="search-btn">
							<el-button @click="save('ruleForm')" :disabled="clickBtn" type="primary">确定</el-button>
							<el-button @click="cancel('ruleForm')">取消</el-button>
						</div>
					</div>
				</transition>
			</div>
			<!---->

			<!--修改仓库-->
			<div class="add">
				<transition name="fade">
					<div class="modal-backdrop" v-show="vue_Modify"></div>
				</transition>
				<transition name="slideDown">
					<div class="specific-search" v-show="vue_Modify">
						<div class="search-title">
							<p>修改仓库</p>
						</div>
						<div class="form">
							<el-form :model="ModifyruleForm" :rules="rules" ref="ModifyruleForm" label-width="100px" class="demo-ruleForm">
							  <el-form-item label="仓库名称" prop="warehouseName">
							    <el-input v-model="ModifyruleForm.warehouseName"></el-input>
							  </el-form-item>
							 <!-- <el-form-item label="仓库编码" prop="warehouseCode">
							    <el-input v-model="ModifyruleForm.warehouseCode"></el-input>
							  </el-form-item>-->
							  <el-form-item label="仓库地址">
							    <el-input type="textarea" v-model="ModifyruleForm.warehouseAddr"></el-input>
							  </el-form-item>

							</el-form>
						</div>
						<div class="search-btn">
							<el-button @click="update('ModifyruleForm')" type="primary">确定</el-button>
							<el-button @click="cancel('ModifyruleForm')">取消</el-button>
						</div>
					</div>
				</transition>
			</div>
			<!---->

			<div class="public-th clearfix">
				<div class="public-right clearfix">
					<a @click="addhouse">新增</a>
				</div>
			</div>

			<div class="table contentBodyCon kehutable" id="table">
				<el-table  ref="multipleTable" :data="goodsWarehouseSet.list" style="width: 100%;  z-index: 10;">
					<el-table-column prop="warehouseName" label="仓库名称" width="425"  to="/modifykehu">
						<template scope="scope">
                        	<p class="pkehuName">
								<span @click="xiangqing(scope.row)" v-html="scope.row.warehouseName"></span><span class="Moactive" v-if="scope.row.warehouseDefault=='1'">默认</span>
                        	</p>
						</template>
					</el-table-column>
					<el-table-column prop="warehouseCode" label="仓库编码" width="425"></el-table-column>
					<el-table-column prop="warehouseAddr" label="仓库地址" min-width="425"></el-table-column>
					<el-table-column prop="" label="" fixed="right" width="60" >
						<template scope="scope">
							<el-popover trigger="hover" placement="bottom">
								<p class="p" style="cursor: pointer;" v-if="scope.row.warehouseDefault=='0'" @click="makeDefaultBtn(goodsWarehouseSet.list[scope.$index].warehouseCode)"><em class="iconfont">&#xe66e;</em>设为默认</p>
								<p class="p" style="cursor: pointer;" @click="queryData(scope.row.warehouseCode)"><em class="iconfont">&#xe617;</em>修改</p>
								<p class="p" style="cursor: pointer;" v-if="scope.row.warehouseDefault=='0'" @click="Delete(goodsWarehouseSet.list[scope.$index].warehouseCode)"><em class="iconfont">&#xe644;</em>删除</p>
								<div slot="reference" class="name-wrapper" style="text-align: center;">
									<em class="iconfont tab-hover">&#xe607;</em>
								</div>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="block">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="parseInt(goodsWarehouseSet.pageTools.pageNo)"
					:page-sizes="goodsWarehouseSet.pageTools.pageSizeOptions"
					:page-size="parseInt(goodsWarehouseSet.pageTools.pageSize)"
					:total="parseInt(goodsWarehouseSet.pageTools.recordCount)"
					layout="total, prev, pager, next, sizes,jumper">
				</el-pagination>
			</div>
		</div>
		<!--end content-->
	</section>
</template>

<script>
	export default {
		data() {
			return {
				clickBtn:false,                 //请求数据后禁用按钮
				vue_add:false,			//新增窗口
				vue_Modify:false,		//修改窗口
				 ruleForm: {			//新增仓库表单
		          warehouseName: '',
		          warehouseCode: '',
		          warehouseAddr:'',
		        },
		         ModifyruleForm: {			//修改仓库表单
		          warehouseName: '',
		          warehouseCode: '',
		          warehouseAddr:'',
		        },
		        rules: {				//仓库验证
		          warehouseName: [
		            { required: true, message: '请输入仓库名称', trigger: 'blur' },
		            { min:3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' }
		          ],
		          warehouseCode: [
		            { required: true, message: '请输入仓库编码', trigger: 'blur' }
		          ]
		        },
		        goodsWarehouseSet:{
		        	list:[{}],			//客户列表数据
					pageTools:{},		//分页数据
					sumInfo:{}			//汇总信息
		        },
			}
		},
		methods: {
			addhouse(){							//新增按钮
				this.vue_add=true;
				this.$refs.ruleForm.resetFields();
				this.ruleForm.warehouseAddr='';
			},
			save(formName) {				//新增仓库
		        this.$refs[formName].validate((valid) => {
		          if (valid) {
		            //新增通知数据请求
		            this.clickBtn=!this.clickBtn;	
		  				this.axios({
		  					method: 'POST',
		  					url: '/v3/goods/warehouses',
							data:{
								"warehouseName":this.ruleForm.warehouseName,
								"warehouseCode":this.ruleForm.warehouseCode,
								"warehouseAddr":this.ruleForm.warehouseAddr
							}
						}).then((res) => {
							this.clickBtn=!this.clickBtn;	
							this.vue_add = false;
	      					this.$refs.ruleForm.resetFields();
	      					this.Public.openSuccess(this,"操作成功！");
	      					this.queryListAll();
						}).catch((err)=>{
							this.clickBtn=!this.clickBtn;	
							this.vue_add = true;
							this.Public.openError(this,err.response.data);
							this.$refs.ruleForm.resetFields();
						});
		          } else {
		            console.log('error submit!!');
		            return false;
		          }
		        });
		      },
		      queryData(warehouseCode){					//查看指定仓库信息
		      	this.vue_Modify=true;
		      	this.axios({
				method: 'GET',
				url: "/v3/goods/warehouses/"+warehouseCode
			}).then((res) => {
				this.ModifyruleForm = res.data;
			}).catch((err)=>{
			    this.Public.openError(this,err.response.data)
		    });

		    },
		      update(formName) {				//修改仓库
		        this.$refs[formName].validate((valid) => {
		          if (valid) {
		  				this.axios({
		  					method: 'PUT',
		  					url: '/v3/goods/warehouses/'+this.ModifyruleForm.warehouseCode,
							data:{
								"warehouseName":this.ModifyruleForm.warehouseName,
								"warehouseCode":this.ModifyruleForm.warehouseCode,
								"warehouseAddr":this.ModifyruleForm.warehouseAddr
							}
						}).then((res) => {
							this.vue_Modify = false;
							this.Public.openSuccess(this,"操作成功！");
	      					this.$refs.ModifyruleForm.resetFields();
							this.queryListAll();
						}).catch((err)=>{
							this.vue_Modify = true;
							this.Public.openError(this,err.response.data);
	      					this.$refs.ModifyruleForm.resetFields();
						});
		          } else {
		            console.log('error submit!!');
		            return false;
		          }
		        });
		      },
		      cancel(ModifyformName) {				//取消
		        this.$refs[ModifyformName].resetFields();
		        if(ModifyformName =='ModifyruleForm'){
		        	 this.vue_Modify=false;
		        }else{
		        	 this.vue_add=false;
		        }
		      },
			//分页
			handleSizeChange(val) {
				this.goodsWarehouseSet.pageTools.pageSize= val;
				this.queryListAll();
			},

			handleCurrentChange(val) {
				this.goodsWarehouseSet.pageTools.pageNo= val;
				this.queryListAll();
			},

			makeDefaultBtn(warehouseCode) {
				this.axios({
					method: 'PATCH',
					url: "/v3/goods/warehouses/"+warehouseCode+"/makeDefault",
					data:{},
					params:{
						"warehouseCode":warehouseCode
					},
				}).then((res) => {
					this.Public.openSuccess(this,"操作成功！");
					this.queryListAll();
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				});
			},

				//删除
			Delete(warehouseCode) {
		        this.$confirm('确定删除此仓库？？', '确认', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          cancelButtonClass:"fr",
		          confirmButtonClass:"fr",
		          customClass:"clearfixBox"
		        }).then(() => {
		          //点击确定的回调
		          this.axios({
	  					method: 'DELETE',
	  					url: '/v3/goods/warehouses/'+warehouseCode
					}).then((res) => {
						this.Public.openSuccess(this,"操作成功！")
						this.queryListAll();
					}).catch((err)=>{
						this.Public.openError(this,err.response.data)
					});
		        }).catch(() => {
		          //点击取消的回调
		        });
		    },
		    //查询仓库列表
      		queryListAll(){
				this.axios({
				method: 'post',
				url: "/v3/goods/warehouses/list",
				data:{
					"limit":this.goodsWarehouseSet.pageTools.pageSize,
					"offset":(this.goodsWarehouseSet.pageTools.pageNo-1)*this.goodsWarehouseSet.pageTools.pageSize
				}
			}).then((res) => {
					this.goodsWarehouseSet.list = res.data.list;
					this.goodsWarehouseSet.pageTools=res.data.pageTools;    //一共几条数据
					this.goodsWarehouseSet.pageTools.pageSizeOptions = JSON.parse(this.goodsWarehouseSet.pageTools.pageSizeOptions);
			}).catch((err)=>{
			    this.Public.openError(this,err.response.data)
		    });
      		},
		},
		created(){
			this.goodsWarehouseSet.pageTools=this.$store.state.page;
			//查询仓库列表
			this.queryListAll();
		},
		mounted(){
			this.$refs.content.style.height=(document.documentElement.clientHeight-110)+'px';
		}
	}
</script>

<style scoped>
	@import "../../../assets/css/zijin.css";
	.location {
		padding: 3px 0 15px 0;
	}

	.content {
		background: #fff;
		padding: 15px;
		overflow-y: auto;
		font-family: "微软雅黑";
		position: relative;
	}

	.public-th {
		min-width: 750px;
		position: relative;
		z-index: 100;
	}

	.public-left {
		float: left;
	}

	.public-left a,
	.public-left span.search-openBtn {
		display: block;
		float: left;
		margin-right: 10px;
		padding-right: 0px;
		position: relative;
		height: 36px;
		line-height: 36px;
		z-index: 100;
		cursor: pointer;
	}

	.public-right {
		float: right;
		overflow: hidden;
	}

	.public-right a {
		display: block;
		float: left;
		margin-left: 10px;
		width: 80px;
		height: 32px;
		box-sizing: border-box;
		text-align: center;
		line-height: 32px;
		border-radius: 30px;
		border: 1px solid #cdd9e6;
		cursor: pointer;
	}

	.public-left a:hover {
		text-decoration: none;
	}

	.public-left a em {
		display: inline-block;
		position: relative;
		font-size: 14px;
	}

	.return-goods .public-left a i {
		position: static;
		width: 20px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		background: none;
		background-size: 18px;
		-webkit-transition: .2s;
		transition: .2s;
		vertical-align: middle;
	}

	.public-right a:hover {
		text-decoration: none;
	}




	.table {
		margin-top: 15px;
	}

	.table th {
		height: 50px;
	}

	.el-table th>.cell {
		word-wrap: normal;
		text-overflow: ellipsis;
		line-height: 20px;
		width: 100%;
		box-sizing: border-box;
		font-weight: normal!important;
		font-size: 14px;
	}

	.el-table {
		font-size: 12px!important;
		font-weight: normal!important;
	}

	.block {
		float: right;
		margin: 15px;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .3s
	}

	.fade-enter,
	.fade-leave-active {
		/*transform: translateY(-100px);*/
		opacity: 0
	}


	.tab-hover {
		color: #b7c6d6;
		cursor: pointer;
	}

	.el-tag {
		background-color: inherit;
		color: #b7c6d6;
	}

	.el-popover {
		min-width: 100px;
	}
	.pkehuName span{
		cursor: pointer;
	}

	.pkehuName span:hover{
		color: #03B8CC;
	}
	.p {
		text-indent: 10px;
		line-height: 30px;
	}

	.p em {
		position: relative;
		top: 2px;
		margin-right: 3px;
	}

	.p:hover {
		background: #eef1f9;
		color: #03B8CC;
	}
	.el-table--fit {
		border-left: 0;
	}
	.modal-backdrop {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 80;
		background-color: rgba(240, 240, 240, 0.2);
	}

	.specific-search {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		padding: 30px;
		z-index: 1005;
		background: #fff;
		box-sizing: border-box;
		box-shadow: 0 0 10px #ccc;
	}

	.search-title {
		font-size: 16px;
		border: 0;
		color: #415161;
	}

	.form {
		width: 450px;
		background: #fff;
		margin: 20px 0;
	}

	.search-btn {
		margin-top: 70px;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: .4s;
	}

	.fade-enter,
	.fade-leave-active {
		opacity: 0;
	}

	.slideDown-enter-active,
	.slideDown-leave-active {
		transition: .4s;
	}

	.slideDown-enter,
	.slideDown-leave-active {
		height: 0;
		opacity: 0;
	}


	.form li {
		margin-top: 15px;
	}
	.slideBtn .el-input__icon+.el-input__inner{
		padding-right: 0px;
    	width: 100px;
	}
	.sousuo{
		margin-left: 10px;
	}
	.clearfix a{
		background: #13c19f;color: #fff;border: 0;
	}
	.Moactive{
		background: #7a8aa2;
		margin-left: 10px;
		color: #fff;
	}
</style>
